<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0 , user-scalable=no"
        />
        <title>canvas手势解锁</title>
        <link rel="stylesheet" href="./reset.css" />
        <style>
            .container {
                position: absolute;
                overflow: hidden;
            }
            @media screen and (max-width: 750px) {
                .container {
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #305066;
                }
            }
            @media screen and (min-width: 750px) {
                .container{
                    left: 50%;
                    transform: translate(-50%);
                    width: 50vw;
                    height: 100%;
                    background-color: #305066;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="canvas"></div>
        </div>
        <script src="./index.js"></script>
        <script>
            /*
            * 俩次免面一致才能通过
            * */
            let lastPwd = ''; // 上次设置的密码
            const lock = new CanvasLock(
                document.querySelector('#canvas'),
                {
                  num: 3,
                  text: {
                      title: '请设置密码',
                  },
                  validate: function(res) {
                      if(res.join('') == lastPwd){
                          return true; // 设置密码成功
                      }
                      return false; // 设置密码失败
                  },
                  success: function(){
                      return "设置密码成功";
                  },
                  error: function(res,unlockTimes) {
                      if(lastPwd == ''){
                          lastPwd = res.join('');
                          // return ["请重复上次的密码",true];
                          return {
                              title: "请重复上次的密码",
                              open: true, // 默认值
                              seconds: 0, // 与open: false一起使用才有效果 && 会替换掉title中的{seconds}
                              style: 'blue', // 可选项 [normal,error]和其他一切的HTML支持的颜色，如: red、rgba值，默认为error
                          }
                      }else{
                          lastPwd = '';
                          // return ["请重新设置密码",true];
                          return {
                              title: '请重新设置密码',
                              open: true,
                              style: 'blue'
                          }
                      }
                  }
                },
            );
            lock.init();
        </script>
    </body>
</html>
